<style lang="stylus" rel="stylesheet/stylus">
  /* variables */
  $gt-color-main = #00adb5;
  $gt-color-sub = #a1a1a1;
  $gt-color-loader = #999999;
  $gt-color-error = #ff3860;
  $gt-color-hr = #E9E9E9;
  $gt-color-input-border = rgba(0, 0, 0, 0.1);
  $gt-color-input-bg = #f6f6f6;
  $gt-color-comment-bg = #f9f9f9;
  $gt-color-comment-adminbg = #f6f9fe;
  $gt-color-comment-txt = #222831;
  $gt-color-link-active = #222831;
  $gt-color-btn = #ffffff;
  $gt-color-popbg = #ffffff;
  $gt-size-base = 16px; // default font-size
  $gt-size-border-radius = 5px;
  $gt-breakpoint-mobile = 479px;
  $gt-mask-z-index = 9999;

  /* functions & mixins */
  clearfix() {
    &:before, &:after {
      content: ' ';
      display: table;
    }

    &:after {
      clear: both;
    }
  }

  em($px, $base-size = $gt-size-base) {
    u = unit($px);

    if (u == 'px') {
      unit(($px / $base-size), 'em');
    } else {
      unit($px, u);
    }
  }

  mobile() {
    @media (max-width: $gt-breakpoint-mobile) {
      {block}
    }
  }

  /* variables - calculated */
  $gt-size-loader-dot = em(6px);
  $gt-size-loader = em(28px);
  $gt-size-avatar = em(50px);
  $gt-size-avatar-mobi = em(32px);

  // Put everything under container to avoid style conflicts
  /* styles */
  .gt-container {
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }

    font-size: $gt-size-base;

    // common
    a {
      color: $gt-color-main;

      &:hover {
        color: lighten($gt-color-main, 20%);
        border-color: lighten($gt-color-main, 20%);
      }

      &.is--active {
        color: $gt-color-link-active;
        cursor: default !important;

        &:hover {
          color: $gt-color-link-active;
        }
      }
    }

    .hide {
      display: none !important;
    }

    // icons
    .gt-svg {
      display: inline-block;
      width: em(16px);
      height: em(16px);
      vertical-align: sub;

      svg {
        width: 100%;
        height: 100%;
        fill: $gt-color-main;
      }
    }

    .gt-ico {
      display: inline-block;

      &-text {
        margin-left: em(5px);
      }

      &-github {
        .gt-svg {
          width: 100%;
          height: 100%;
        }

        svg {
          fill: inherit;
        }
      }
    }

    /* loader */
    .gt-spinner {
      position: relative;

      &::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 3px;
        width: em(12px);
        height: em(12px);
        margin-top: em(-3px);
        margin-left: em(-6px);
        border-radius: 50%;
        border: 1px solid $gt-color-btn;
        border-top-color: $gt-color-main;
        animation: gt-kf-rotate 0.6s linear infinite;
      }
    }

    .gt-loader {
      position: relative;
      border: 1px solid $gt-color-loader;
      animation: ease gt-kf-rotate 1.5s infinite;
      display: inline-block;
      font-style: normal;
      width: $gt-size-loader;
      height: $gt-size-loader;
      // font-size: $gt-size-loader
      line-height: $gt-size-loader;
      border-radius: 50%;

      &:before {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        left: 50%;
        margin-top: -($gt-size-loader-dot / 2);
        margin-left: -($gt-size-loader-dot / 2);
        width: $gt-size-loader-dot;
        height: $gt-size-loader-dot;
        background-color: $gt-color-loader;
        border-radius: 50%;
      }
    }

    // avatar
    .gt-avatar {
      display: inline-block;
      width: $gt-size-avatar;
      height: $gt-size-avatar;

      +mobile() {
        width: $gt-size-avatar-mobi;
        height: $gt-size-avatar-mobi;
      }

      img {
        width: 100%;
        height: auto;
        border-radius: 3px;
      }

      &-github {
        width: $gt-size-avatar - em(2px);
        height: $gt-size-avatar - em(2px);

        +mobile() {
          width: $gt-size-avatar-mobi - em(2px);
          height: $gt-size-avatar-mobi - em(2px);
        }
      }
    }

    // button
    .gt-btn {
      padding: em(12px) em(20px);
      display: inline-block;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid $gt-color-main;
      border-radius: $gt-size-border-radius;
      background-color: $gt-color-main;
      color: $gt-color-btn;
      outline: none;
      font-size: em(12px);

      &-text {
        font-weight: 400;
      }

      &-loading {
        position: relative;
        margin-left: em(8px);
        display: inline-block;
        width: em(12px);
        height: em(16px);
        vertical-align: top;
      }

      &.is--disable {
        cursor: not-allowed;
        opacity: 0.5;
      }

      &-login {
        margin-right: 0;
      }

      &-preview {
        background-color: $gt-color-btn;
        color: $gt-color-main;

        &:hover {
          background-color: darken($gt-color-btn, 5%);
          border-color: lighten($gt-color-main, 20%);
        }
      }

      &-public {
        &:hover {
          background-color: lighten($gt-color-main, 20%);
          border-color: lighten($gt-color-main, 20%);
        }
      }

      &-loadmore {
        // loadmore
      }
    }

    /* error */
    .gt-error {
      text-align: center;
      margin: em(10px);
      color: $gt-color-error;
    }

    /* initing */
    .gt-initing {
      padding: em(20px) 0;
      text-align: center;

      &-text {
        margin: em(10px) auto;
        font-size: 92%;
      }
    }

    /* no int */
    .gt-no-init {
      padding: em(20px) 0;
      text-align: center;
    }

    /* link */
    .gt-link {
      border-bottom: 1px dotted $gt-color-main;

      &-counts, &-project {
        text-decoration: none;
      }
    }

    /* meta */
    .gt-meta {
      margin: em(20px) 0;
      padding: em(16px) 0;
      position: relative;
      border-bottom: 1px solid $gt-color-hr;
      font-size: em(16px);
      position: relative;
      z-index: 9;
      clearfix();
    }

    .gt-counts {
      margin: 0 em(10px) 0 0;
    }

    .gt-user {
      float: right;
      margin: 0;
      font-size: 92%;

      &-pic {
        width: 16px;
        height: 16px;
        vertical-align: top;
        margin-right: em(8px);
      }

      &-inner {
        display: inline-block;
        cursor: pointer;
      }

      .gt-ico {
        margin: 0 0 0 em(5px);

        svg {
          fill: inherit;
        }
      }

      .is--poping {
        .gt-ico {
          svg {
            fill: $gt-color-main;
          }
        }
      }
    }

    .gt-version {
      color: $gt-color-sub;
      margin-left: em(6px);
    }

    .gt-copyright {
      margin: 0 em(15px) em(8px);
      border-top: 1px solid $gt-color-hr;
      padding-top: em(8px);
    }

    /* popup */
    .gt-popup {
      position: absolute;
      right: 0;
      top: em(38px);
      background: $gt-color-popbg;
      display: inline-block;
      border: 1px solid $gt-color-hr;
      padding: em(10px) 0;
      font-size: em(14px);
      letter-spacing: 0.5px;

      .gt-action {
        cursor: pointer;
        display: block;
        margin: em(8px) 0;
        padding: 0 em(18px);
        position: relative;
        text-decoration: none;

        &.is--active {
          &:before {
            content: '';
            width: em(4px);
            height: em(4px);
            background: $gt-color-main;
            position: absolute;
            left: em(8px);
            top: em(7px);
          }
        }
      }
    }

    /* header */
    .gt-header {
      position: relative;
      display: flex;

      &-comment {
        flex: 1;
        margin-left: em(20px);

        +mobile() {
          margin-left: em(14px);
        }
      }

      &-textarea {
        padding: em(12px);
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-height: em(82px);
        max-height: em(240px);
        border-radius: $gt-size-border-radius;
        border: 1px solid $gt-color-input-border;
        font-size: em(14px);
        word-wrap: break-word;
        resize: vertical;
        background-color: $gt-color-input-bg;
        outline: none;
        transition: all 0.25s ease;

        &:hover {
          background-color: lighten($gt-color-input-bg, 50%);
          // box-shadow: 0 em(10px) em(60px) 0 $gt-color-input-bg
        }
      }

      &-preview {
        padding: em(12px);
        border-radius: $gt-size-border-radius;
        border: 1px solid $gt-color-input-border;
        background-color: $gt-color-input-bg;
      }

      &-controls {
        position: relative;
        margin: em(12px) 0 0;
        clearfix();

        +mobile() {
          margin: 0;
        }

        &-tip {
          font-size: em(14px);
          color: $gt-color-main;
          text-decoration: none;
          vertical-align: sub;

          +mobile() {
            display: none;
          }
        }

        .gt-btn {
          float: right;
          margin-left: em(20px);

          +mobile() {
            float: none;
            width: 100%;
            margin: em(12px) 0 0;
          }
        }
      }
    }

    &:after {
      content: '';
      position: fixed;
      bottom: 100%;
      left: 0;
      right: 0;
      top: 0;
      opacity: 0;
    }

    &.gt-input-focused {
      position: relative;

      &:after {
        content: '';
        position: fixed;
        bottom: 0%;
        left: 0;
        right: 0;
        top: 0;
        background: #000;
        opacity: 0.6;
        transition: opacity 0.3s, bottom 0s;
        z-index: $gt-mask-z-index;
      }

      .gt-header-comment {
        z-index: $gt-mask-z-index + 1;
      }
    }

    /* comments */
    .gt-comments {
      padding-top: em(20px);

      &-null {
        text-align: center;
      }

      &-controls {
        margin: em(20px) 0;
        text-align: center;
      }
    }

    /* comment */
    .gt-comment {
      position: relative;
      padding: em(10px) 0;
      display: flex;

      &-content {
        flex: 1;
        margin-left: em(20px);
        padding: em(12px) em(16px);
        background-color: $gt-color-comment-bg;
        overflow: auto;
        transition: all ease 0.25s;

        &:hover {
          box-shadow: 0 em(10px) em(60px) 0 darken($gt-color-comment-bg, 2%);
        }

        +mobile() {
          margin-left: em(14px);
          padding: em(10px) em(12px);
        }
      }

      &-header {
        margin-bottom: em(8px);
        font-size: em(14px);
        position: relative;
      }

      &-username {
        font-weight: 500;
        color: $gt-color-main;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      &-text {
        margin-left: em(8px);
        color: $gt-color-sub;
      }

      &-date {
        margin-left: em(8px);
        color: $gt-color-sub;
      }

      &-like, &-edit, &-reply {
        position: absolute;
        height: em(22px);

        &:hover {
          cursor: pointer;
        }
      }

      &-like {
        top: 0;
        right: em(32px);
      }

      &-edit, &-reply {
        top: 0;
        right: 0;
      }

      &-body {
        color: $gt-color-comment-txt !important;
      }

      &-admin {
        .gt-comment-content {
          background-color: $gt-color-comment-adminbg;
        }
      }
    }
  }

  @keyframes gt-kf-rotate {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>

<template>
  <div class="gitalk-container">
    <div id="gitalk-container"></div>
  </div>
</template>
<script>
  export default {
    name: "comment",
    data() {
      return {};
    },
    mounted() {
      let body = document.querySelector(".gitalk-container");

      let script = document.createElement("script");
      script.src = "https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js";
      body.appendChild(script);

      script.onload = () => {
        const commentConfig = require('../../../../private-config')['gitalk'];
        const gitalk = new Gitalk(commentConfig);
        gitalk.render("gitalk-container");
      }
    }
  };
</script>
